<template>
  <div class="app-container">
    <el-card style="margin-bottom: 10px">
      <el-row class="id-row" >
        <el-col :span="8" :offset="8">
          <el-card class="id-card" :body-style="{ padding: '0px' }">
            <a v-if="idCardInfoIdCard" @click.stop="onIdCardInfoCollect">
              <div class="id-card-showForm">
                <img src="@/assets/collect_images/idCardInfoCollect.png" class="image" >
              </div>
            </a>
            <div v-else class="id-card-info">
              <el-form class="id-card-info-from">
                <el-form-item size="small" label="身份证号" prop="idCard">
                  <el-input v-model="idCard"></el-input>
                </el-form-item>
              </el-form>
              <div class="bottom id-card-info-frombottom clearfix">
                <el-button size="small" type="primary" @click.stop="onSearchClick">确认</el-button>
              </div>
            </div>
            <!-- 右上角按钮 -->
            <div class="handForm">
              <el-button size="small" type="primary" icon="el-icon-refresh" @click.stop="handFormClick">{{handFormVal}}</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import { getIdCardInfo } from "@/utils/highScanner";
import { closeCollectTag } from "@/utils/tools";

export default {
  data(){
    return {
      handFormVal: "手动输入",
      idCardInfoIdCard: true, // 手动输入切换
      idCard: null
    }
  },
  methods:{
    onIdCardInfoCollect() {
      let temp = getIdCardInfo();
      this.idCard = temp.id;
      this.$router.push({
        name: "personalQueryResult",
        query: { idCard: this.idCard}
      })
    },
    handFormClick() {
      this.idCardInfoIdCard = !this.idCardInfoIdCard;
      this.idCardInfoIdCard == false
        ? (this.handFormVal = "采集输入")
        : (this.handFormVal = "手动输入");
    },
    onSearchClick(){
      if(!this.idCard){
        this.$message.error('请输入身份证号');
        return
      }else{
        var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (!regIdNo.test(this.idCard)) {
          this.$message.error('身份证号不正确');
          return
        }
      }
      this.$router.push({
        name: "personalQueryResult",
        query: { idCard: this.idCard}
      })
    }
  }
}
</script>
<style scoped>
.handForm {
  position: absolute;
  right: 0;
  top: 0;
  width: 98px;
  height: 40px;
  z-index: 200;
}

.id-card {
  width: 352px;
  height: 210px;
  position: relative;
}

.id-card img {
  width: 100%;
  height: 100%;
}
/* 信息回填样式 */
.id-card-showForm {
  overflow: hidden;
  position: relative;
}

.showForm-top-listBot {
  font-size: 13px;
  height: 22px;
  color: #909399;
  line-height: 22px;
  overflow: hidden;
  width: 89%;
}

.showForm-top-listCity {
  font-size: 14px;
  height: 44px;
  color: #909399;
  line-height: 22px;
  overflow: hidden;
}

.showForm-top-list {
  font-size: 14px;
  height: 22px;
  color: #909399;
  line-height: 22px;
}

.showForm-top-listFirst {
  margin-top: 9px;
}

.showForm-top-list small {
  color: #409eff;
  font-size: 15px;
}

.showForm-box-top-lf {
  width: 248px;
}

.showForm-box-top-lr img {
  width: 87px !important;
  height: 130px !important;
  margin-top: 10px;
  margin-left: 5px;
}

.showForm-top-listSenoud {
  margin-top: 7px;
}

.showForm-box-top-lr {
  width: 110px;
}

.showForm-box-top {
  height: 150px;
  width: calc(100% - 10px);
  margin-left: 10px;
  display: flex;
  justify-content: space-between;
}

.showForm-box-bot {
  height: 60px;
  width: calc(100% - 20px);
  border-top: 1px dashed #ccc;
  margin-left: 10px;
  position: relative;
}

.showForm-box-botCard .el-icon-picture-outline {
  font-size: 20px;
}

.showForm-box-botCard {
  position: absolute;
  right: 5px;
  top: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(247, 209, 27);
  cursor: pointer;
}

.showForm-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 99%;
  z-index: 100;
  background-color: rgba(233, 245, 253, 1);
  overflow: hidden;
}
/* 信息回填样式 */
.id-card-showForm img {
  width: 100%;
  height: 100%;
}

.id-card-info-frombottom {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

.id-card-info {
  padding-left: 18px;
  padding-right: 18px;
}

.id-card-info img {
  height: 100%;
  width: 100px;
}

.id-card-info-from {
  margin-top: 39px;
}

.id-row {
  margin-bottom: 20px;
}

</style>
